﻿<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>M-SS商城首页</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	    	<link href="css/bootstrap.min.css" rel="stylesheet">
    	<link rel="stylesheet" href="css/index.css" />
    	<link rel="stylesheet" href="css/normalize.css">
    	<link rel="stylesheet" href="css/style1.css" media="screen" type="text/css" />
    	<link rel="stylesheet" href="css/sticky-footer-navbar.css" />
  <style>
canvas { position: absolute; top: 0; left: 0;

 }
#c{
	-webkit-animation: xian 10s linear;
	-moz-animation: xian 10s linear;
	-o-animation: xian 10s linear;
	-ms-animation: xian 10s linear;
	animation: xian 10s linear;
	
	animation-fill-mode:forwards;
}
@-webkit-keyframes xian {
    0% {
		opacity: 1;
		z-index:10;
    }
    25%{
    	opacity: 1;
    	z-index:10;
    }
    50%{
    	opacity: 1;
    	z-index:10;
    }	
    75%{
    	opacity: 1;
    	z-index:10;
    }
    
    100% {
		opacity: 0;
		z-indx:-1;
    }
}

@-moz-keyframes xian {
     0% {
		opacity: 1;
		z-index:10;
    }
    25%{
    	opacity: 1;
    	z-index:10;
    }
    50%{
    	opacity: 1;
    	z-index:10;
    }	
    75%{
    	opacity: 70%;
    	z-index:10;
    }
    100% {
		opacity: 0;
		z-indx:-1;
    }
}

@-o-keyframes xian {
    0% {
		opacity: 1;
		z-index:10;
    }
    25%{
    	opacity: 1;
    	z-index:10;
    }
    50%{
    	opacity: 1;
    	z-index:10;
    }	
    75%{
    	opacity: 70%;
    	z-index:10;
    }
    100% {
		opacity: 0;
		z-indx:-1;
    }
}

@-ms-keyframes xian {
    0% {
		opacity: 1;
		z-index:10;
    }
    25%{
    	opacity: 1;
    	z-index:10;
    }
    50%{
    	opacity: 1;
    	z-index:10;
    }	
    75%{
    	opacity: 70%;
    	z-index:10;
    }
    100% {
		opacity: 0;
		z-indx:-1;
    }
}

@keyframes xian {
     0% {
		opacity: 1;
		z-index:10;
    }
    25%{
    	opacity: 1;
    	z-index:10;
    }
    50%{
    	opacity: 1;
    	z-index:10;
    }	
    75%{
    	opacity: 70%;
    	z-index:10;
    }
    100% {
		opacity: 0;
		z-indx:-1;
    }
}
</style>
  </head>
  
<body id="body">
<canvas id="c"></canvas>

<script type="text/javascript">
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext('2d'),
opts = {
	len: 20,
	count: 50,
	baseTime: 10,
	addedTime: 10,
	dieChance: .05,
	spawnChance: 1,
	sparkChance: .1,
	sparkDist: 10,
	sparkSize: 2,
	color: 'hsl(hue,100%,light%)',
	baseLight: 50,
	addedLight: 10,
	shadowToTimePropMult: 6,
	baseLightInputMultiplier: .01,
	addedLightInputMultiplier: .02,
	cx: w / 2,
	cy: h / 2,
	repaintAlpha: .04,
	hueChange: .1
},
tick = 0,
lines = [],
dieX = w / 2 / opts.len,
dieY = h / 2 / opts.len,
baseRad = Math.PI * 2 / 6;
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, w, h);
function loop() {
	window.requestAnimationFrame(loop); ++tick;
	ctx.globalCompositeOperation = 'source-over';
	ctx.shadowBlur = 0;
	ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', opts.repaintAlpha);
	ctx.fillRect(0, 0, w, h);
	ctx.globalCompositeOperation = 'lighter';
	if (lines.length < opts.count && Math.random() < opts.spawnChance) lines.push(new Line);
	lines.map(function(line) {
		line.step()
	})
}
function Line() {
	this.reset()
}
Line.prototype.reset = function() {
	this.x = 0;
	this.y = 0;
	this.addedX = 0;
	this.addedY = 0;
	this.rad = 0;
	this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();
	this.color = opts.color.replace('hue', tick * opts.hueChange);
	this.cumulativeTime = 0;
	this.beginPhase()
}
Line.prototype.beginPhase = function() {
	this.x += this.addedX;
	this.y += this.addedY;
	this.time = 0;
	this.targetTime = (opts.baseTime + opts.addedTime * Math.random()) | 0;
	this.rad += baseRad * (Math.random() < .5 ? 1 : -1);
	this.addedX = Math.cos(this.rad);
	this.addedY = Math.sin(this.rad);
	if (Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY) this.reset()
}
Line.prototype.step = function() {++this.time; ++this.cumulativeTime;
	if (this.time >= this.targetTime) this.beginPhase();
	var prop = this.time / this.targetTime,
	wave = Math.sin(prop * Math.PI / 2),
	x = this.addedX * wave,
	y = this.addedY * wave;
	ctx.shadowBlur = prop * opts.shadowToTimePropMult;
	ctx.fillStyle = ctx.shadowColor = this.color.replace('light', opts.baseLight + opts.addedLight * Math.sin(this.cumulativeTime * this.lightInputMultiplier));
	ctx.fillRect(opts.cx + (this.x + x) * opts.len, opts.cy + (this.y + y) * opts.len, 2, 2);
	if (Math.random() < opts.sparkChance) ctx.fillRect(opts.cx + (this.x + x) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.cy + (this.y + y) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.sparkSize, opts.sparkSize)
}
loop();
window.addEventListener('resize',
function() {
	w = c.width = window.innerWidth;
	h = c.height = window.innerHeight;
	ctx.fillStyle = 'black';
	ctx.fillRect(0, 0, w, h);
	opts.cx = w / 2;
	opts.cy = h / 2;
	dieX = w / 2 / opts.len;
	dieY = h / 2 / opts.len
});
</script>


<jsp:include page="/indexServlet"></jsp:include>
		<!--导航-->
		<nav class="navbar navbar-inverse  navbar-fixed-top" id="nav">
			<div class="container" id="nav_1">
				<nav class="navbar-header">
					<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a href="${pageContext.request.contextPath }/index.jsp" class="navbar-brand">M-SS网上商城</a>
				</nav>
				<div class="collapse navbar-collapse" id="myNavbar" id="myNavbar">
					<ul class="nav navbar-nav">
						<li class="active"><a href="${pageContext.request.contextPath }/index.jsp">首页</a></li>
						<li><a href="##menu1">CPU</a></li>
						<li><a href="##menu2">主板</a></li>
						<li><a href="#">显卡</a></li>
						<li><a href="#">内存</a></li>
						<li><a href="#">SSD</a></li>
						<li><a href="#">电源</a></li>
						<li><a href="#">机箱</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-responsive-collapse navbar-right">
						<li>
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> <c:if test="${MyUser eq null }">我的账户</c:if><c:if test="${MyUser ne null }">${MyUser.username }</c:if> <span class="caret"></span></a>
							<c:if test="${MyUser eq null }">
								<ul class="dropdown-menu dropdown-menu-left">
						        	<li><a href="${pageContext.request.contextPath }/login.jsp">登录</a></li>
						        	<li><a href="${pageContext.request.contextPath }/register.jsp">注册</a></li>   
					          	</ul>
				          	</c:if>
				          	<c:if test="${MyUser ne null }">
					          	<ul class="dropdown-menu dropdown-menu-left">
						        	<li><a href="${pageContext.request.contextPath }/user/userinfo.jsp">我的信息</a></li>
						        	<li><a href="${pageContext.request.contextPath }/user/order.jsp">我的订单</a></li>   
						        	<li><a href="${pageContext.request.contextPath }/exitServlet">退出</a></li>   
					          	</ul>
			          		</c:if>
						</li>
						<li>
							<a href="${pageContext.request.contextPath }/user/shopping.jsp"><span class="glyphicon glyphicon-shopping-cart"></span> 购物车</a>
						</li>
					</ul>
					<form class="navbar-form navbar-right hidden-sm">
						<div class="form-group">
							<input class="form-control" type="text" placeholder="搜索商品" id="serch"/>
						</div>
						 <button type="submit" class="btn btn-success">搜索</button>
					</form>
		     	</div>
			</div>
		</nav>
		<!--导航-->
		
		<!--banner-->
		<div class="container" style="margin-top: 51px;">
			<div data-ride="carousel" id="carousel_container" class="carousel slide">
				<!--图片容器 -->
				<div class="carousel-inner">
					<div class="item"><a href="#"><img class="center-block" src="image/56c27c76Ne2809638.jpeg" /></a></div>
					<div class="item active"><a href="#"><img class="center-block" src="image/57401149Ne2e3d3f9 (1).jpeg" /></a></div>
					<div class="item"><a href="#"><img class="center-block" src="image/C95EAC4F-1F5E-4B5C-B276-5F7C12117B9F.png" /></a></div>
				</div>

				<!--小圆圈容器 -->
				<ol class="carousel-indicators" id="ol">
					<li data-slide-to="0" data-target="#carousel_container"></li>
					<li data-slide-to="1" data-target="#carousel_container"></li>
					<li data-slide-to="2" data-target="#carousel_container"></li>
				</ol>
				<!--左右按钮容器 -->
				<a href="#carousel_container" data-slide="prev" class="left carousel-control">
					<span class="glyphicon glyphicon-chevron-left"></span>
				</a>

				<a href="#carousel_container" data-slide="next" class="right carousel-control">
					<span class="glyphicon glyphicon-chevron-right"></span>
				</a>
			</div>
		</div><br>
		<!--banner-->
		<!--内容-->
		<div class="container" id="shangping">
			<div class="panel panel-info" id="mr1">
				
				<div class="panel-heading" id="#menu1">
					<a href="${pageContext.request.contextPath }/goods.jsp?goods_sorts=CPU" style="text-decoration: none;" id="dao">
						CPU<!--图标-->
						<span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span>
					<span class="glyphicon glyphicon-align-justify pull-right"></span>
					</a>
				</div>
				
				<div class="clearfix"></div>
			</div>
			<!-- ---------------------------------------- -->
			<c:forEach items="${AllSorts.CPU }" var="CPU">
				<div class="thumbnail col-sm-3">
					<a class="thumbnail" href="${pageContext.request.contextPath }/goods-details.jsp?goods_id=${CPU.goods_id}"><img src="img/${CPU.goods_pic}" alt="pic">
						<div class="caption text-center">
							<h3 style="margin-top: 1px;">${CPU.goods_name }</h3>
							<p>${CPU.goods_dename }</p>
						</div>
					</a>
				</div>
			</c:forEach>
			<!-- ----------------------------------------- -->
		</div>
		
		<div class="container">
			<div class="panel panel-success" id="mr2">
				<div class="panel-heading" id="#menu2">
					<a href="${pageContext.request.contextPath }/goods.jsp?goods_sorts=主板" style="text-decoration: none;" id="dao">
					主板
					<span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span>
					<span class="glyphicon glyphicon-align-justify pull-right"></span>
					</a>
				</div>
			</div>
			<!-- ----------------------------------------- -->
			<c:forEach items="${AllSorts.mainboard }" var="mainboard">
				<div class="thumbnail col-sm-4">
					<a class="thumbnail" href="${pageContext.request.contextPath }/goods-details.jsp?goods_id=${mainboard.goods_id}"><img src="img/${mainboard.goods_pic }" alt="pic">
						<div class="caption text-center">
							<h3 style="margin-top: 1px;">${mainboard.goods_name }</h3>
							<p>${mainboard.goods_dename }</p>
						</div>
					</a>
				</div>
			</c:forEach>
			<!-- ----------------------------------------- -->
		</div>
		<div class="container" id="shangping">
			<div class="panel panel-info" id="mr1">
				
				<div class="panel-heading" id="#menu1">
					<a href="${pageContext.request.contextPath }/goods.jsp?goods_sorts=显卡" style="text-decoration: none;" id="dao">
						显卡<!--图标-->
						<span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span>
					<span class="glyphicon glyphicon-align-justify pull-right"></span>
					</a>
				</div>
				
				<div class="clearfix"></div>
			</div>
			<!-- ----------------------------------------- -->
			<c:forEach items="${AllSorts.graphicsCard }" var="graphicsCard">
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="${pageContext.request.contextPath }/goods-details.jsp?goods_id=${graphicsCard.goods_id}"><img src="img/${graphicsCard.goods_pic }" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">${graphicsCard.goods_name }</h3>
						<p>${graphicsCard.goods_dename }</p>
					</div>
				</a>
			</div>
			</c:forEach>
			<!-- ----------------------------------------- -->
		</div>
		<div class="container">
			<div class="panel panel-success" id="mr2">
				<div class="panel-heading" id="#menu2">
					<a href="${pageContext.request.contextPath }/goods.jsp?goods_sorts=RAM" style="text-decoration: none;" id="dao">
					内存
					<span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span>
					<span class="glyphicon glyphicon-align-justify pull-right"></span>
					</a>
				</div>
			</div>
			<!-- ----------------------------------------- -->
			<c:forEach items="${AllSorts.RAM }" var="RAM">
			<div class="thumbnail col-sm-4">
				<a class="thumbnail" href="${pageContext.request.contextPath }/goods-details.jsp?goods_id=${RAM.goods_id}"><img src="img/${RAM.goods_pic }" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">${RAM.goods_name }</h3>
						<p>${RAM.goods_dename }</p>
					</div>
				</a>
			</div>
			</c:forEach>
			<!-- ----------------------------------------- -->
		</div>
		<div class="container" id="shangping">
			<div class="panel panel-info" id="mr1">
				
				<div class="panel-heading" id="#menu1">
					<a href="${pageContext.request.contextPath }/goods.jsp?goods_sorts=SSD" style="text-decoration: none;" id="dao">
						SSD<!--图标-->
						<span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span>
					<span class="glyphicon glyphicon-align-justify pull-right"></span>
					</a>
				</div>
				<div class="clearfix"></div>
			</div>
			<!-- ----------------------------------------- -->
			<c:forEach items="${AllSorts.SSD }" var="SSD">
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="${pageContext.request.contextPath }/goods-details.jsp?goods_id=${SSD.goods_id}"><img src="img/${SSD.goods_pic}" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">${SSD.goods_name }</h3>
						<p>${SSD.goods_dename }</p>
					</div>
				</a>
			</div>
			</c:forEach>
			<!-- ----------------------------------------- -->
		</div>
		<div class="container">
			<div class="panel panel-success" id="mr2">
				<div class="panel-heading" id="#menu2">
					<a href="${pageContext.request.contextPath }/goods.jsp?goods_sorts=电源" style="text-decoration: none;" id="dao">
					电源
					<span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span>
					<span class="glyphicon glyphicon-align-justify pull-right"></span>
					</a>
				</div>
			</div>
			<!-- ----------------------------------------- -->
			<c:forEach items="${AllSorts.power }" var="power">
			<div class="thumbnail col-sm-4">
				<a class="thumbnail" href="${pageContext.request.contextPath }/goods-details.jsp?goods_id=${power.goods_id}"><img src="img/${power.goods_pic}" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">${power.goods_name }</h3>
						<p>${power.goods_dename }</p>
					</div>
				</a>
			</div>
			</c:forEach>
			<!-- ----------------------------------------- -->
		</div>
		<div class="container" id="shangping">
			<div class="panel panel-info" id="mr1">
				
				<div class="panel-heading" id="#menu1">
					<a href="${pageContext.request.contextPath }/goods.jsp?goods_sorts=机箱" style="text-decoration: none;" id="dao">
						机箱<!--图标-->
						<span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span>
					<span class="glyphicon glyphicon-align-justify pull-right"></span>
					</a>
				</div>
				
				<div class="clearfix"></div>
			</div>
			<!-- ----------------------------------------- -->
			<c:forEach items="${AllSorts.BOX }" var="BOX">
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="${pageContext.request.contextPath }/goods-details.jsp?goods_id=${BOX.goods_id}"><img src="img/${BOX.goods_pic }" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">${BOX.goods_name }</h3>
						<p>${BOX.goods_dename }</p>
					</div>
				</a>
			</div>
			</c:forEach>
			<!-- ----------------------------------------- -->
		</div>
		
		</div>
		
		<footer class="container-fluid panel-footer text-center">
			<p>网上商城 Copyright</p>
		</footer>
		<!--内容-->
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
	</body>
</html>
